<?php 
ob_start();
include_once "FrontendManager.php";
$db_frnmanager = new FrontendManager();
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Historiador</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">


    <!-- Fav and touch icons -->
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
    href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="img/favicon.ico">

	
    <!-- BEGIN GRAFICAS -->
   <link class="include" rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="css/examples.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
	
	
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
    <!--BEGIN SCRIPTS/CSS GRAFICOS -->
    <!-- css's -->
  

    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="js/jquery.min.ie.js"></script>
    <!-- END SCRIPTS/CSS GRAFICOS -->
    
    <script type="text/javascript">
	
    	$(function() {
    		$('#datetimepicker4').datetimepicker({
    			pickTime: false
    		});
    	});
    </script>

    <script>
    	function showUser(anio)
    	{


    		if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  	xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  xmlhttp.onreadystatechange=function()
  {
  	if (xmlhttp.readyState==4 && xmlhttp.status==200)
  	{
  		//document.getElementById("grafi").innerHTML=xmlhttp.responseText;    
		grafic(xmlhttp.responseText);
  	}
  }
  xmlhttp.open("POST","getanio.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("f1=" + anio );
  return false;
}
</script>
</head>

<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">FritoLay</a>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li>
                <a href="TiempoReal.php">Tiempo Real</a>
              </li>
              <li class="active">
                <a href="Historiador.php">Historiador</a>
              </li>           
              <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reportes<strong class="caret"></strong></a>
              <ul class="dropdown-menu">                
                <li>
                  <a href="demo1.php">Jornada 1</a>
                </li>
                <li>
                  <a href="demo2.php">Jornada 2</a>
                </li>               
              </ul>
            </li>
            </ul>         
          </div>        
        </nav>				
				<div class="jumbotron">
					<h1>
						Historiador
					</h1>						
				</div> <!-- end jumbotron -->


        <div class="container well">

          <form  role="form"  method="POST" onSubmit="return showUser(anio.value)">

            Año:  
            <div id="datetimepicker4" class="input-append">
              <input data-format="yyyy" type="text" name="anio" id="anio">
              <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar">
                </i>
              </span>
            </div>

            <br><br>
            <input class="btn btn-primary btn-large" type="submit">
          </form>
        </div>          
      </div>

      <div class="container" id="txtHint">
        <div class="panel panel-primary">
         <div class="panel-heading">
          <h3 class="panel-title">
           Grafica
         </h3>
       </div>

       <div class="panel-body" id="grafi">
<div id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:200px;"></div>
    <div style="padding-top:20px"><button value="reset" type="button" onclick="plot1.resetZoom();">Reset Zoom</button></div>

       </div>
       <div class="panel-footer">
        alguna metadata sobre la grafica (fecha, hora, descripcion, etc)
      </div>
    </div>

  </div>		
  
  <script>
  
  function grafic(cadena){
    // Enable plugins like cursor and highlighter by default.
    $.jqplot.config.enablePlugins = true;
    // For these examples, don't show the to image button.
    $.jqplot._noToImageButton = true;

 var matriz=cadena.split(",");
 
  goog = [["01",parseFloat([matriz[0]])],["02",parseFloat([matriz[1]])],["03",parseFloat([matriz[2]])],["04",parseFloat([matriz[3]])],["05",parseFloat([matriz[4]])]
  ,["06",parseFloat([matriz[5]])],["07",parseFloat([matriz[6]])],["08",parseFloat([matriz[7]])],["09",parseFloat([matriz[8]])],["10",parseFloat([matriz[9]])],["11",parseFloat([matriz[10]])],["12",parseFloat([matriz[11]])]];
 
  opts = {
    title: 'Velocidad Promedio Mensual.',
    series: [{
        neighborThreshold: 0
    }],
    axes: {
        xaxis: {
   renderer:$.jqplot.DateAxisRenderer,
  
   tickInterval:'1 month',
          tickOptions:{formatString:"%m"}
        },
        yaxis: {
              
        }
    },
    cursor:{zoom:true}
};
 
plot1 = $.jqplot('chart1', [goog], opts);
  }

  
  </script>
  
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">

</script>




<!-- End example scripts -->

<!-- Don't touch this! -->


<script class="include" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- End Don't touch this! -->

<!-- Additional plugins go here -->
<script class="include" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="plugins/jqplot.cursor.min.js"></script>
<script class="include" type="text/javascript" src="plugins/jqplot.highlighter.min.js"></script>
<!-- End additional plugins -->
</body>	
</html>
